<template>
	<div v-if="params != null" class='container container-padding'>
		<nav-header ></nav-header>
		<div class='input-group'>
			<label class='label-key'>
		      <span>联系人</span>
		    </label>
			<input type="text" class='input-value' placeholder='姓名' v-model="params.true_name" />
		</div>
		<div class='input-group'>
			<label class='label-key'>
		      <span>联系电话</span>
		    </label>
			<input type="tel" class='input-value' placeholder='手机号' v-model="params.mob_phone" />
		</div>
		<div class='input-group'>
			<label class="label-key">
		      <span>省市区</span>
		    </label>
			<div title="地址" :value="params.area_info" class='input-value picker'>
				<my-address class='input-value' :confirmHandle='_confirmHandle'>{{params.area_info==null?"未设置":params.area_info}}</my-address>
			</div>
		</div>
		<div class='input-group'>
			<label class='label-key'>
		      <span>详细地址</span>
		    </label>
			<input type="text" class='input-value' placeholder='街道小区与门牌号' v-model="params.address" />
		</div>
		<div class='input-group'>
			<label class='label-key' @click='toggleDefault'>
				<span v-if="params.is_default" class="icon icon-select"></span>
				<span v-else="" class="icon icon-no-select"></span>
				<span></span>默认地址
	    </label>
		</div>
		<div class='save-btn' @click='addAddress'>
			<span>保存地址</span>
		</div>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import judge from "@/config/judge"
	import { Toast } from 'mint-ui';
	import server from '@/server/api';
	import MyAddress from '@/components/address-picker/address-picker.vue'
	export default {
		name: 'home',
		components: {
			"nav-header": header,
			"my-address": MyAddress,
		},
		data() {
			return {
				params:null
			}
		},
		created(){
			this.params = this.$store.state.editAddress;
		},
		methods: {
			_confirmHandle(val) {
				// 从子组件接受返回所选值 val
				this.params.area_info = " ";
				for(var i = 0; i < val.length; i++) {
					this.params.area_info += val[i].area_name + " ";
				}
				this.params.area_name = val[2].area_name;
				this.params.area_id = val[2].area_id;
				this.params.city_id = val[1].area_id;
				this.params.city_name = val[1].area_name;
				
			},
			addAddress() {
				let _this = this;
				if(this.params.true_name == null || this.params.true_name == ""){
					Toast("请填写联系人姓名");
      				return;
				};
				if(!judge.isValidPhone(this.params.mob_phone)){
					Toast("手机号码不符合规则");
      				return;
				};
				if(this.params.area_info == null){
					Toast("请选择省市区");
      				return;
				};
				if(this.params.address == null || this.params.true_name == ""){
					Toast("请填写详细地址");
      				return;
				};
				server.post('/index/user/setAddress', this.params, function(res) {
//					 if (res.data.error != 0) {
//				        Toast(res.data.message);
//				        return;
//				      }
					 _this.$router.go(-1)
				})
				
			},
			toggleDefault() {
				this.params.is_default = !this.params.is_default;
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		overflow: hidden;
		margin: 90px 0 100px;
		padding: 0 40px;
		box-sizing: border-box;
		.input-group {
			display: flex;
			align-items: center;
			height: 140px;
			box-shadow: 0 1px #e5e5e5 inset;
			.label-key {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				min-width: 120px;
				padding-right: 50px;
				font-size: 30px;
				color: #4A4A4A;
				.icon-no-select {
					display: inline-block;
					width: 36px;
					height: 40px;
					margin-right: 10px;
					/*background-image: url("../../../static/img/fill_success.png");*/
				}
				.icon-select {
					display: inline-block;
					width: 36px;
					height: 40px;
					margin-right: 10px;
					background-image: url("../../../static/img/fill_success.png");
				}
			}
			.input-value {
				color: #9b9b9b;
				font-size: 30px;
				border: none;
			}
		}
		.save-btn {
			height: 90px;
			background-image: linear-gradient(-180deg, #f64565 0%, #ef364e 100%);
			color: #fff;
			font-size: 36px;
			text-align: center;
			line-height: 90px;
			box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
			border-radius: 8px;
		}
	}
</style>